<template>
	<view class="content">
		<div class="baseCon bgpay_s" style="margin-top: 12px;">
			<image src="/static/images/success.png"></image>
			<div>
				<div style="font-size: 18px;font-weight: 500;">购买成功</div>
				<div style="color: #83878E;font-size: 13px;margin-top: 5px;">凭「二维码」直接核验使用</div>
			</div>
		</div>
		<div class="baseCon" style="border-radius:0 0 8px 8px;">
			<div style="text-align: center;">
				<tki-qrcode v-if="ewmData.ifShow" cid="qrcode2" ref="qrcode2" :val="ewmData.val" :size="ewmData.size"
					:onval="ewmData.onval" :loadMake="ewmData.loadMake" :usingComponents="true" />
				<div style="font-size: 16px;font-weight: 500;margin-top: 12px;">加油时，请出示二维码</div>
			</div>

			<div class="bh-box">
				<div style="margin-right: auto;font-size: 13px;width: 500rpx;">
					订单编号：{{form.orderNo}}</div>
				<div class="zflex" style="align-items: center;" @click="copy(form.orderNo)">
					<image class="copyImg" src="/static/images/copy.png"></image>
					<div class="copyTxt">复制</div>
				</div>
			</div>
		</div>

		<div class="baseCon" style="margin-top: 12px;">
			<div class="zflex">
				<image class="oilImg" src="/static/images/oilImg.png"></image>
				<div style="width: calc(100% - 60px);">
					<div class="zflex">
						<div style="font-size: 15px;font-weight: bold;margin-right: auto;">{{form.oilName}}</div>
						<div style="font-size: 15px;color: #ff6c1e;font-weight: 500;">¥{{form.actualPayment}}</div>
					</div>
					<div><span class="oil-tl">价格：</span><span class="oil-tr">¥{{form.discountPrice}}</span></div>
					<div><span class="oil-tl">数量：</span><span class="oil-tr">约{{form.refueleQuantity}}L/kg</span></div>
				</div>
			</div>

		</div>

		<div style="padding:24px 12px;">
			<div class="btn-pay btn-100" @click="goPage('/pages/order/detail?id=' + eId)">查看订单</div>
		</div>


	</view>
</template>

<script>
	import {
		detailsDriver
	} from '@/request/api.js'
	import {
		copyText
	} from "@/utils/common.js"
	export default {
		components: {},
		data() {
			return {
				eId: null,
				form: {},
				ewmData: {
					val: '123123',
					ifShow: true,
					size: 300, // 二维码大小
					onval: false, // val值变化时自动重新生成二维码
					loadMake: true, // 组件加载完成后自动生成二维码
				}
			}
		},
		mounted() {
			//this.open()
		},
		onLoad(e) {
			this.eId = e.id
			this.getDetail()
		},
		onShow() {},
		methods: {
			getDetail() {
				let data = {
					id: this.eId,
					latitude: '',
					longitude: ''
				}
				detailsDriver(data).then(res => {
					this.form = res.data
				})
			},
			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},
			copy(e) {
				copyText(e)
			},

			clickImg(url) {
				uni.previewImage({
					current: url,
					urls: [url],
					indicator: 'none',
					loop: false
				});
			},

		}
	}
</script>

<style scoped>
	uni-swiper {
		height: 420rpx;
	}
</style>